import React from 'react'
import moment from 'moment';
import {Input, Row, Col, InputNumber, Select, DatePicker, Form} from 'antd'
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
import styles from './index.less'

//高级搜索的表单中的下拉多选字段(用于选项多于3个时)
class SelectGroup extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.field,
      label: props.displayName,
      onchange:props.onchange,
      multiple: props.multiple || false,
      dataSource:props.selectData,
      selectorKey:props.selectorKey,
      selectorValue:props.selectorKey,
      placeholder:props.placeholder,
      val: props.defaultValue ? props.defaultValue : props.multiple ? []:""
    };
    this.changeHandle = this.changeHandle.bind(this);
  }
  componentWillReceiveProps(props,next){
    this.setState({
      name: props.field,
      label: props.displayName,
      onchange:props.onchange,
      multiple: props.multiple || false,
      dataSource:props.selectData,
      selectorKey:props.selectorKey,
      selectorValue:props.selectorValue,
      placeholder:props.placeholder
      // val: props.defaultValue ? props.defaultValue:[]
    });
  }
  changeHandle (value) {
    this.props.onchange&&this.props.onchange(value);
    this.setState({val: value});
  }
  render () {
    var {dataSource,selectorValue,selectorKey,multiple,label,name,val,placeholder} = this.state;
    if(!(dataSource instanceof Array)){
      console.error("下拉框的数据源必须是数组");
      return null;
    }
    if(multiple) { // 多选
      placeholder = placeholder ? placeholder: "请选择(多选)";
    } else { //单选
      if(dataSource[0]&&dataSource[0].key != ''){
        dataSource.unshift({key : "", value : '请选择'});
      }
      placeholder = placeholder ? placeholder: "请选择(单选)";
    }
    dataSource = dataSource.map(function (data) {
      let obj = {};
      obj.key = data[selectorKey]||data['key'];
      obj.value = data[selectorValue]||data['value'];
      return obj;
    });
    return (  <Col style={{marginLeft: '20px'}} span={4}>
        <label className="ff_label" style={{paddingBottom: "7px"}}>{this.state.label} :</label>
        <Select
          multiple={this.state.multiple}
          showSearch
          name={this.state.name}
          style={{width: '100%'}}
          className="ff_select"
          optionFilterProp="children"
          value={this.state.val}
          placeholder={placeholder}
          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          onChange={this.changeHandle}
        >
          {dataSource.map(function (item, key) {
            return <Select.Option key={name + key + ''} value={item.key + ''}>{item.value}</Select.Option>
          })}
        </Select>
      </Col>
    );
  }
}
//高级搜索的表单中的文本字段
class TextInput extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.field,
      label: props.displayName,
      val: props.defaultValue||""
    };
    this.changeHandle = this.changeHandle.bind(this);
    // this.reset = this.reset.bind(this);
  }
  changeHandle (e) {
    this.setState({val: e.target.value});
  }

  render () {
    const {placeholder} = this.props
    return  <Col style={{marginLeft: '20px'}} span={4}>
      <label className="ff_label">{this.state.label} :</label>
      <Input className="ff_input" name={this.state.name} size={'large'} placeholder={placeholder ? placeholder:('请输入' + this.state.label)} value={this.state.val} onChange={this.changeHandle}/>
    </Col>
  }
}
//搜索的表单中的日期类型字段
class Timepicker extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.field,
      label: props.displayName,
      format: props.timeFormat ? props.timeFormat : 'YYYY-MM-DD',
      placeholder:props.placeholder||'',
      val: props.defaultValue||'',
    };
    this.fromChange = this.fromChange.bind(this);
  }

  fromChange (date, dateString) {
    this.setState({val: dateString || ''});
  }
  render () {
    var {label,format,val, placeholder} = this.state;
    placeholder = placeholder ? placeholder: "请选择时间";
    val=val.length==0 ? "":val;
    return (
      <Col style={{marginLeft: '20px'}} span={4}>
        <label className="ff_label">{label} :</label>
        <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px', paddingRight:'6px'}}>
          <DatePicker onChange={this.fromChange}
                      placeholder={placeholder}
                      format={format}
                      size={'large'}
                      showTime
                      value={val? moment(val, format):null}
                      style={{width:'100%'}} />
        </FormItem>
      </Col>
    );
  }
}
//时间段控件
class TimepickerRange extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      name: props.field,
      label: props.displayName,
      format: props.timeFormat ? props.timeFormat : 'YYYY-MM-DD',
      placeholder:props.placeholder||'',
      val: props.defaultValue||'',
    };
    this.fromChange = this.fromChange.bind(this);
  }

  fromChange (date, dateString) {
    this.setState({val: dateString[0]+'~'+dateString[1] || ''});
  }
  render () {
    var {label,format,val, placeholder} = this.state;
    placeholder = placeholder ? placeholder: "请选择时间段";
    val=val.length==0 ? "":val;
    return (
      <Col style={{marginLeft: '20px'}} span={4}>
        <label className="ff_label">{label} :</label>
        <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px', paddingRight:'6px'}}>
          <RangePicker onChange={this.fromChange}
                       placeholder={placeholder}
                       size={'large'}
                       format={format}
                       showTime={{
                         hideDisabledOptions: true
                       }}
                       style={{width:'100%'}} />
        </FormItem>
      </Col>
    );
  }
}

export default {
  SelectGroup,
  Timepicker,
  TimepickerRange,
  TextInput,
}
